import React from "react";
import styles from "./index.module.less";
import SvgIcon from "@components/SvgIcon";
import addImg from "@images/web-chat/addrbook-add-img.png";
import Item from "./item";

const Group = (props) => {
    const { title, img, user } = props;

    return (
        <div className={styles.group}>
            <p className={styles.title}>{title}</p>
            <Item
                img={img}
                user={user}
                path="/web-chat/address-book/new-friends-list"
            />
        </div>
    );
};

const Main = () => {
    return (
        <>
            <div className={styles.manage}>
                <div className={styles.inner}>
                    <div className={styles.manage_icon}>
                        <SvgIcon font="icon-wodehaoyou" />
                    </div>
                    <span>通讯录管理</span>
                </div>
            </div>
            <Group title="新的朋友" img={addImg} user="新的朋友" />
            <Group title="星标朋友" />
            <Group title="公众号" />
            <Group title="企业号" />
        </>
    );
};

export default Main;
